module.exports = class Zoom {
	constructor(id) {
		this._config = {};
		this._ele = document.querySelector(id);
		this.mc = new Hammer.Manager(this._ele);
		this.timer = false;
		this.translateX = 0;
		this.translateY = 0;
		this.scale = 1;
		this.firstTouch = true; //用户第一次触摸
		this._relateX = (document.body.clientWidth - this._ele.offsetWidth) / 2;
		this._relateY = (document.body.clientHeight - this._ele.offsetHeight) / 2;
		this._oldX = 0;
		this._oldY = 0;
		this._oldScale = 1;
	}

	picAnimate() {
		return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function(callback) {
			setTimeout(callback, 1000 / 60);
		};
	}

	// _setPosition() {
	// 	var that = this;
	// 	var _relateX = 0;
	// 	var _relateY = 0;
	// 	var _relateTop = 0;
	// 	var _relateLeft = 0;
	// 	_relateX = (document.body.clientWidth - this._ele.offsetWidth) / 2;
	// 	_relateY = (document.body.clientHeight - this._ele.offsetHeight) / 2;
	// 	_relateTop = this._ele.offsetTop;
	// 	_relateLeft = this._ele.offsetLeft;

	// 	that._selfPosition({
	// 		translateX: that._relateX,
	// 		translateY: that._relateY,
	// 		scale: that.scale
	// 	})
	// }

	_selfPosition(pos) {
		// pos.trans = this._ele.style.transform
		// this._log.innerHTML = JSON.stringify(pos)
		var that = this;
		var _pos = function() {
			var _style = [
				// 'translate3d(' + pos.translateX + 'px,' + pos.translateY + 'px,0)',
				'translate(' + pos.translateX + 'px,' + pos.translateY + 'px)',
				'scale(' + pos.scale + ',' + pos.scale + ')'
			]
			_style = _style.join(' ');
			that._ele.style.transform = _style;
		};
		that._picAnimate(_pos);
	}
	_picAnimate(fn) {
		return this.picAnimate()(fn);
	}

	onPan(ev) {
		// var that = this;

		// that.translateX = ev.deltaX;
		// that.translateY = ev.deltaY;

		// that._position = {
		// 	translateX: ev.deltaX,
		// 	translateY: ev.deltaY,
		// 	scale: that.scale
		// };

		//that._selfPosition(that._position);
	}
	// onPinch: function() {
	// 	var that = this;

	// 	that.scale *= ev.scale;

	// 	that._selfPosition({
	// 		translateX: that.translateX,
	// 		translateY: that.translateY,
	// 		scale: that.scale
	// 	})
	// },
	init() {
		var that = this;
		that.mc.on("hammer.input", function(ev) {
			if (ev.isFinal) {
				//that._setPosition();
				that._oldX = that.translateX;
				that._oldY = that.translateY;
				that._oldScale = that.scale;
			}
		})
		that.mc.add(new Hammer.Pan({
			direction: Hammer.DIRECTION_ALL,
			threshold: 0,
			pointers: 0
		}));
		that.mc.add(new Hammer.Pinch({
			threshold: 0
		})).recognizeWith(that.mc.get('pan'));

		that.mc.on('panstart panmove', _onPan);
		// that.mc.on('panstart', that.onPanStart);
		// that.mc.on('panmove', that.onPanMove);
		that.mc.on('pinchstart pinchmove', _onPinch);

		// that._setPosition();

		function _onPan(ev) {
			if (ev.scale == 1)
				return that.onPan.call(that, ev)

			if (that.firstTouch) {
				that._oldX = that._relateX;
				that._oldY = that._relateY;
			};

			that.translateX = that._oldX + ev.deltaX;
			that.translateY = that._oldY + ev.deltaY;

			var _position = {
				translateX: that.translateX,
				translateY: that.translateY,
				scale: that.scale
			};

			that._selfPosition(_position);
			that.firstTouch = false;
		};

		function _onPinch(ev) {
			let scale = that._oldScale * ev.scale;
			if (scale < 0.5 || scale > 3)
				return
			that.scale = scale;
			// that.ctx.scale(scale, scale)
			// that.ctx.lineWidth = 5
			that._selfPosition({
				translateX: that.translateX,
				translateY: that.translateY,
				scale: that.scale
			})
		};
	}
}